<template>
<div>
    <Upload multiple type="drag" action="http://localhost:3000/upload/filedata" name="avatar">
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>上传文件</p>
        </div>
    </Upload>
    
    <Table border :columns="columns" :data="list" @on-select="checkMore"></Table>
    <Page :total="40" show-sizer size="small" show-elevator @on-change="onChangePage" @on-page-size-change="changeSize"></Page>
</div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex';
export default {
  data() {
    return {
      selectmassage: {
        name: ""
      },
      formValidate: {
        name: "",
        mail: "222@qq.com"
      },
      ruleValidate: {
        name: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
        mail: [
          { required: true, message: "邮箱不能为空", trigger: "blur" },
          { type: "email", message: "邮箱格式不正确", trigger: "blur" }
        ]
      },
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "title",
          key: "name",
          render: (h, params) => {
            return h("div", [
              h("Icon", {
                props: {
                  type: "person"
                }
              }),
              h("strong", params.row.name)
            ]);
          }
        },
        {
          title: "邮箱",
          key: "mail"
        },
        {
          title: "城市",
          key: "city"
        },
        {
          title: "评论数",
          key: "useCommont"
        },
        {
          title: "Action",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.show(params.index);
                    }
                  }
                },
                "查看信息"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.remove(params);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],

      list: [],
      data: {
        outmassage: [],
        select: [],
        pages: 0,
        page: 1,
        total: 1,
        limit: 5
      }
    };
  },
  created() {
    this.getData();
  },
  methods: {
    ...mapActions(['checkLogin']),
    getData(type) {
      var type = type || 0;
      this.$http({
        method: "post",
        url: "http://localhost:300/upload/filedata",
        data: {
          limit: this.data.limit,
          page: this.data.page
        }
      }).then(response => {
        this.data.total = response.data.total;
        this.list = response.data.docs;
      });
    },
    changeSize(size) {
      this.data.limit = size;
      this.getData();
    },
    
    checkMore(selection, row) {
      selection.forEach((element, index) => {
        this.data.select[index] = element._id;
      });
    },
    onChangePage(page) {
      this.data.page = page;
      this.getData();
    },
    outlogin(){
       this.checkLogin(false)
    }
  },
  computed:{
      ...mapGetters(['login'])
  }
};
</script>
